<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>表白墙信息</span>
                </div>
            </template>
            <el-form :model="data.confessionalWallDetail" :rules="rules" ref="examineRef">
                <el-form-item label="发布人" label-width="130px">
                    <el-input v-model="data.confessionalWallDetail.publishNickName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="发布学校" label-width="130px">
                    <el-input v-model="data.confessionalWallDetail.publishSchoolName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="内容" label-width="130px">
                    <el-input :autosize="{ minRows: 10, maxRows: 10 }" v-model="data.confessionalWallDetail.content"
                              autocomplete="off" type="textarea"/>
                </el-form-item>
                <el-form-item label="表白墙图片" label-width="130px">
                    <div class="demo-image" v-for="image in data.confessionalWallDetail.images" :key="image">
                        <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                                  :preview-src-list="data.confessionalWallDetail.images"/>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>表白墙评论</span>
                </div>
            </template>
            <el-table :data="data.confessionalWallParentComments" border style="width: 100%" v-loading="data.loading"
                      lazy
                      element-loading-text="拼命加载中"
                      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                      row-key="uuid" :load="load">
                <el-table-column fixed prop="commentNickName" label="评论人名称" align="center" width="150px"/>
                <el-table-column prop="repliedNickName" label="被回复名称" align="center" width="150px"/>
                <el-table-column prop="content" label="内容" align="center" width="400px"/>
                <el-table-column prop="avatar" label="评论头像" align="center" width="150px">
                    <template #default="scope">
                        <el-avatar :src="scope.row.commentAvatar"/>
                    </template>
                </el-table-column>

                <el-table-column prop="commentTime" label="评论时间" width="180" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="230" align="center">
                    <template #default="scope">
                        <el-popconfirm title="你确定要删除该评论吗？" confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteConfessionalWallComment(scope.row.uuid)">
                            <template #reference>
                                <el-button class="button-space" type="danger" size="small">删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="data.total"
                           style="text-align: center; margin-top: 10px" @current-change="currentChange">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {reactive, onMounted} from "vue";
import {detail} from "@/api/confessionalWall/confessionalWall";
import {useRoute} from "vue-router";
import {pageChildrenComment, pageParentComment, deleted} from "@/api/confessionalWall/confessionalWallComment";
import {ElMessage} from "element-plus";

export default {
    setup() {
        const data = reactive({
            confessionalWallDetail: '',
            // 父级评论
            confessionalWallParentComments: [],
            total: 0,
            loading: false
        })
        const route = useRoute();
        const searchParam = reactive({
            page: 1,
            size: 10
        })
        /**
         * 获取父级评论
         */
        const pageSearchParentComment = () => {
            pageParentComment(searchParam, route.query.uuid).then(res => {
                data.confessionalWallParentComments = res.data.records
                data.total = res.data.total
                data.confessionalWallParentComments.forEach(confessionalWallParentComment => {
                    confessionalWallParentComment.children = []
                })
            })

        }
        /**
         * 获取子集评论
         * @param row
         * @param treeNode
         * @param resolve
         */
        const load = (row, treeNode, resolve) => {
            pageChildrenComment(searchParam, row.uuid).then(res => {
                row.children = res.data.records
                resolve(row.children)
            })
        }
        /**
         * 获取表白墙详情
         */
        const confessionalWallDetail = () => {
            detail(route.query.uuid).then(res => {
                data.confessionalWallDetail = res.data
            })
        }
        /**
         * 删除表白墙评论
         * @param uuid
         */
        const deleteConfessionalWallComment = (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchParentComment()
            })
        }
        onMounted(() => {
            confessionalWallDetail()
            pageSearchParentComment()
        })
        return {
            data,
            load,
            deleteConfessionalWallComment
        }
    }
}
</script>